<!--
  + fetch 是在创建组件实例之后在服务器端渲染期间以及在导航时在客户端上调用的挂钩
    + fetch钩子应返回一个async/await将被解决的promise（无论是显式还是隐式使用）：
  + fetch 既可以在服务器端调用又可以在客户端调用，基于SSR
    + 在SSR的情况下，在server下就会在服务端调用 【server和client的说明查看fetchState的注释】
    + 在client下，就会在客户端调用，或者fetchOnServer: false
  + fetch 在creatd 之后进行调用
    + 在呈现初始页面之前的服务器上
    + 在客户端上安装组件后的一段时间

  它$fetchState 在组件级别公开 ，具有以下属性：
    + pending是一个Boolean，允许您在【客户端】fetch 调用 时显示占位符 。
    + error是由fetch钩子抛出null 还是Error被抛出
    + timestamp是最后一次提取的时间戳，可用于缓存 keep-alive

    fetchOnServer: false 将仅在客户端调用，并  在服务器渲染组件时$fetchState.pending 返回 true。
    就是说如果是SSR得话，那么返回的doc，就只有下面 Fetching mountains...，数据将在客户端拿到
 -->
<template>
  <p v-if="$fetchState.pending">
    Fetching mountains...
  </p>
  <p v-else-if="$fetchState.error">
    An error occurred :(
  </p>
  <div v-else>
    <h1>Nuxt Mountains</h1>
    <ul>
      <li v-for="(mountain, index) of mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
    <button @click="$fetch">
      Refresh
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mountains: []
    }
  },
  async fetch () {
    // eslint-disable-next-line no-console
    console.log('fetch')
    this.mountains = await fetch(
      'https://api.nuxtjs.dev/mountains'
    ).then(res => res.json())
  },
  // call fetch only on client-side
  fetchOnServer: false,
  created () {
    // eslint-disable-next-line no-console
    console.log(1)
  }
}
</script>
